<template>
  <el-pagination v-model:currentPage="page.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize" :layout="layout" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"> </el-pagination>
</template>
<script lang="ts" setup>
import { reactive, computed, onMounted, withDefaults } from 'vue'
const emit = defineEmits(['reload'])
const props = withDefaults(
  defineProps<{
    total?: number
    pageNo?: number
    pageSize?: number
    layout?: string
    small?: boolean
    reloadImmediate?: boolean
  }>(),
  {
    total: 0,
    layout: 'total, ->, sizes, prev, pager, next, jumper',
    pageNo: 1,
    pageSize: 10,
    reloadImmediate: true,
  },
)

// const cSmall = computed(() => {
//   return props.small ?? false
// })
const page = reactive({
  pageNo: props.pageNo,
  pageSize: props.pageSize,
})
function handleSizeChange(pageSize: number) {
  page.pageSize = pageSize
  page.pageNo = 1
  emit('reload', page)
}
function handleCurrentChange(pageNo: number) {
  page.pageNo = pageNo
  emit('reload', page)
}
onMounted(() => {
  if (props.reloadImmediate) {
    emit('reload', page)
  }
})
// const component = defineComponent({
//   name: '',
//   props: {
//     total: { type: Number, default: 0 },
//     pageNo: { type: Number, default: 1 },
//     pageSize: { type: Number, default: 10 },
//     layout: {
//       type: String,
//       default: 'total, ->, prev, pager, next,sizes, jumper',
//     },
//     small: {
//       type: Boolean,
//       default: false,
//     },
//   },
//   setup(props, { emit }) {

//     // onMounted(() => {
//     //   emit('reload', page);
//     // });
//     return {
//       page,
//       handleSizeChange,
//       handleCurrentChange,
//     }
//   },
// })
// export default component
</script>
<style lang="scss"></style>
